<template>
  <div class="main">
    <!-- loading -->
    <div v-if="!bookinfo">
      <br />
      <div class="loading" ></div>
    </div>
    <div v-else>
      <!-- 页头 -->
      <a-page-header @back="goBack" :sub-title="bookinfo.bookName"></a-page-header>
      <!-- 详情 -->
      <div class="bookinfo">
        <div class="pic">
          <img :src="bookinfo.picUrl" alt />
        </div>
        <div class="txt">
          <div class="bookName">{{bookinfo.bookName}}</div>
          <div class="author">作者：{{bookinfo.author}}</div>
          <div class="cate">
            分类：{{bookinfo.category}}
          </div>
          <div style="clear:both"></div>
          <div class="status">状态：{{bookinfo.status}}</div>
          <div class="updateTime">最后更新：{{bookinfo.updateTime}}</div>
        </div>
      </div>
      <!-- 按钮 -->
      <div class="btn">
        <a-button type="primary"  @click="startRead">开始阅读</a-button>
        <a-button :type="btnType"  @click="clickBtn">{{btnStr}}</a-button>
      </div>
      <!-- 最新章节 -->
      <div class="lastChapter"></div>
      <!-- 内容简介 -->
      <br>
      <div class="intro">{{bookinfo.intro}}</div>
      <!-- 目录 -->
      <div class="list" @click="isShowList=true">目录>></div>
      <List :bookinfo="bookinfo" :list="list"  v-if="isShowList" @hideList="hideList"></List>
      
    </div>
  </div>
</template>

<script>
import List from '@/components/List.vue'
import {Button,PageHeader} from 'ant-design-vue'
import {getBookInfo,getCatalog } from '@/api/index.js'

export default {
  data: () => {
    return {
      bookinfo: null,
      list: null,
      btnStr: "",
      url: null,
      isShowList:null,
      currentChapter:0,
      btnType:'primary'
    };
  },
  components:{
    List,
    'a-button':Button,
    'a-page-header':PageHeader
  },

  created() {
    var url = this.$route.params.bookUrl;
    this.url = url;
    this.isInBookcase()
    this.fetchBookInfo(url);
    
  },
  mounted(){
    var w = window.innerWidth
    if(w<420){
      this.isShowList=false
    }else{
      this.isShowList=true
    }
  },
  methods: {
    // 获取简介
    async fetchBookInfo(url) {
      let res = await getBookInfo({url})
      this.bookinfo = res.data
      this.getList();
    },
    goBack() {
      this.$router.go(-1);
      
    },
    // 获取目录
    async getList() {
      const res = await getCatalog({
        url:this.url
        })
      this.list = res.data
    },
    hideList(){
      this.isShowList=false
    },
    // 开始阅读
    startRead(){
      this.$router.push({
        path:'/reader',
        query:{
          bookUrl:this.url,
          bookName:this.bookinfo.bookName,
          currentChapter:this.currentChapter
        }
      })
    },
    // 判断是不是在书架里
    isInBookcase(){
      let bookCase =JSON.parse(localStorage.getItem('bookCase')) 
      if(bookCase===null){bookCase=[]}
      let isExistCase = false;
      for (let item of bookCase) {
        if (item.url === this.url) {
          // 如果在书架里
          this.currentChapter=item.currentChapter;
          isExistCase = true;
        }
      }
      if(isExistCase){
        this.btnStr = '移出书架'
        this.btnType = 'danger'
      }else{
        this.btnStr = '加入书架'
        this.btnType = 'primary'
      }
    },
    // 加入/移出书架
    clickBtn(){
      if(this.btnStr==='加入书架'){
        console.log(this.bookinfo)
         let bookCase =JSON.parse(localStorage.getItem('bookCase')) 
         if(bookCase===null){bookCase=[]}
         let book = {...this.bookinfo,currentChapter:this.currentChapter}
         bookCase.unshift(book)
         localStorage.setItem("bookCase", JSON.stringify(bookCase));
         this.btnStr='移出书架'
         this.btnType='danger'
      }else if(this.btnStr==='移出书架'){
         let bookCase =JSON.parse(localStorage.getItem('bookCase')) 
        console.log(bookCase,this.url)
         for (let index in bookCase){
           if(bookCase[index].url === this.url){
             bookCase.splice(index,1)
           }
         }
         localStorage.setItem("bookCase", JSON.stringify(bookCase));
          this.btnStr='加入书架'
         this.btnType='primary'
      }
    }
  }
};
</script>

<style lang='less' scoped>
@media screen and (max-width: 420px) {
  .loading {
    margin: 200px auto;
  }
  .title {
    line-height: 50px;
    height: 50px;
    overflow: hidden;
    width: 95%
    
    
  }
  .bookinfo {
    display: flex;
    padding-left:10px;
    padding-right:10px;
    .pic {
      width: 30%;
      margin: 5px;
       background: url(../assets/cover.jpg);
        background-size: 100% 100%;
      img {
        width: 100%;
      }
    }
    .txt {
      margin: 5px;
      width: 60%;
      .bookName {
        margin-top: 30px;
        font-size: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .author {
        margin-top: 5px;
        font-size: 14px;
      }
      .cate {
        margin-top: 5px;
        font-size: 14px;
        a {
          color: darkblue;
          text-decoration: none;
        }
      }
       .status {
        margin-top: 5px;
        font-size: 14px;
      }
       .updateTime {
        margin-top: 5px;
        font-size: 14px;
      }
    }
  }
  .btn {
    display: flex;
    justify-content: space-around;
  }
  .intro {
    width: 95%;
    margin: 10px auto;
    text-indent: 2em;
    font-size: 14px;
    min-height: 100px
  }

  .list{
    line-height: 2.5;
    border: 1px solid lightgray;
    border-radius: 5px;
    text-indent: 1em;
    width: 95%;
    margin:0 auto
  }
}

@media screen and (min-width:420px){
  .main{
    padding-top: 35px;
  }
  .loading{
    margin-top: 50px
  }
  .title{
    padding-top: 20px;
    padding-bottom: 20px;
    background: lightgray
  }
  .bookinfo{
    margin-top: 20px;
    display: flex;
    height: 240px;
    .pic{
      width: 180px;
      height: 240px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .txt{
      width: 800px;
      margin: 30px;
      font-family: '宋体';
      border-bottom: 3px solid lightgray;
      .bookName{
        font-size: 32px;
      }
     .status, .author{
        float: left;
        margin: 10px;
        width: 300px
      }
      .cate,.updateTime{
        float: left;
        margin: 10px
      }
    }
  }
  .btn{
   margin-top: -80px;
   display: flex;
   justify-content: center;
   button{
     margin-left: 50px
   }
  }
  .intro{
    text-indent: 2em;
    font-size: 14px;
    line-height: 1.5;
    width: 95%;
    margin: 0 auto;
    margin-top: 50px;
    min-height: 60px
  }
  .list{
    display: none;
  }
  
  
}
</style>